 import React, { PureComponent } from 'react'
 import {connect} from "react-redux";
 import {withRouter} from "react-router-dom";
 import PageBackHeader from "@common/PageBackHeader";
 import ShoppingMallOrderDetailStatus from '@components/shoppingMall/ShoppingMallOrderDetailStatus'
 import OrderDetailProductTable from "@common/presentational/OrderDetailProductTable";
 import {STORAGE_STATUS} from "@constants/StorageStatus";
 import {
     getWarehouseRefundInfo
 } from '@sagas/warehouse/refund'
 import {DELIVER_TYPE} from "@constants/DeliveryType";
 import {getHistoryMatchParams} from "@utils/setUrlQuery";
 import {priceFenToYuan} from "@utils/priceConversion";
 
 @connect(({ refund }) => ({
    warehouseRefundInfo: refund.warehouseRefundInfo
 }), {
     getWarehouseRefundInfo
 })
 @withRouter
 class WarehouseRefundDetailPage extends PureComponent {
     constructor(props) {
         super(props);
 
         this.columns = [{
             title: '单价',
             dataIndex: 'price',
             key: 'price',
             render: text => `￥${priceFenToYuan(text)}`
         }, {
             title: '数量',
             dataIndex: 'quantity',
             key: 'quantity',
         }, {
             title: '优惠金额',
             dataIndex: 'discount',
             key: 'discount',
             render: text => `￥${priceFenToYuan(text)}`
         }, {
             title: '小计',
             dataIndex: 'trans',
             key: 'trans',
         }, {
             title: '库存情况',
             dataIndex: 'storage_status',
             key: 'storage_status',
             render: (text, record) => text ? (
                 STORAGE_STATUS[text]
                 // <span className="can-click" onClick={() => this.showProductStorage(record, orderDetail)}>{ STORAGE_STATUS[text] }</span>
             ) : STORAGE_STATUS[text]
         }, {
             title: '退款状态',
             dataIndex: 'last_refund_status',
             key: 'last_refund_status',
             // render: text => text ? SHOPPING_MALL_REFUND_ORDER_STATUS[text] : '无'
         }]
     }
 
     componentDidMount () {
         this.getOrderDetail()
     }
 
     getOrderDetail () {
         const { orderNumber, warehouseId } = getHistoryMatchParams(this.props)
         this.props.getWarehouseRefundInfo({ id:warehouseId,orderNumber })
     }
 
     calAllDiscountCount (discounts) {
         let discountCount = 0
         discounts.forEach(discount => {
             discountCount += discount.discount
         })
         return discountCount
     }
 
     render () {
         const { warehouseRefundInfo, history } = this.props
         const orderDetail = warehouseRefundInfo || null
         return orderDetail && orderDetail.order_number ? (
             <div className="bilin-web">
                 <PageBackHeader title="订单详情" backUrl={history.location.query || "/warehouse/order"}/>
                 <div className="bilin-web-body">
                     <div className="warehouse-order-detail">
                         {/* <ShoppingMallOrderDetailStatus orderDetail={orderDetail} getOrderDetail={this.getOrderDetail.bind(this)}/> */}
                         <div className="detail-box flex-row-between flex-vertical-top">
                             <div className="max-w-quarter-2">
                                 <div className="ft-clr-d ft-16">配货信息</div>
                                 <div className="ft-clr-d mgt-24">
                                     <span>配送方式：</span>
                                     <span className="mgl-4">{ DELIVER_TYPE[orderDetail.deliver_type] }</span>
                                 </div>
                                 <div className="ft-clr-d mgt-16">
                                     <span>配货仓库：</span>
                                     <span className="mgl-4">{ orderDetail.warehouse_name }</span>
                                 </div>
                             </div>
                                 <div className="max-w-quarter-2">
                                     <div className="ft-clr-d ft-16">收货人信息</div>
                                     <div className="ft-clr-d mgt-24">
                                         <span>下单客户：</span>
                                         <span className="mgl-4">{ orderDetail.creator }</span>
                                     </div>
 
                                     {orderDetail.deliver_type === 0 ? (
                                         <div className="ft-clr-d mgt-16">
                                             <span>预约时间：</span>
                                             <span className="mgl-4">{ orderDetail.deliver_memo.deliver_time || '等待取货' }</span>
                                         </div>
                                     ) : (
                                         <div className="ft-clr-d mgt-16">
                                             <span>收货信息：</span>
                                             <span className="mgl-4">{ orderDetail.receiver },{orderDetail.address}</span>
                                         </div>
                                     )}
                                     <div className="ft-clr-d mgt-16">
                                         <span>客户备注：</span>
                                         <span className="mgl-4">{ orderDetail.remark?.memo || '--' }</span>
                                     </div>
                                 </div>
                         </div>
                         <div className="detail-box">
                             <div className="ft-clr-d ft-16">订单信息</div>
                             <div className="mgt-36 mgb-36 flex-row-between flex-vertical-top">
                                 <div>
                                     <span>订单编号：</span>
                                     <span className="mgl-4">{ orderDetail.order_number }</span>
                                 </div>
                             </div>
                             <OrderDetailProductTable
                                 columns={this.columns}
                                 detailList={orderDetail.details || []}
                             />
                         </div>
                     </div>
                 </div>
             </div>
         ) : null
     }
 }
 
 export default WarehouseRefundDetailPage